<template>
  <view :class="{'is-animation': isAnimation}" class="p-pop-x">
    <view :class="{'is-show': show === 1}" class="layer-1" @click="handleOpen">
      <view class="title" />
      <view class="box">
        <view class="round" />
        <view class="timeout">{{ sum }}秒后自动领取</view>
      </view>
    </view>
    <view :class="{'is-show': show === 2}" class="layer-2">
      <view class="box" />
    </view>
    <view :class="{'is-show': show === 3}" class="layer-3">
      <view class="title" />
      <view class="box" @click="handleSubmit">
        <view class="absolute">
          <view class="dl">
            <view class="dt">恭喜获得</view>
            <view class="amount">
              {{ detail.totalDiscountAmount }}
              <view class="sub">元</view>
            </view>
          </view>
        </view>
        <view class="timeout">{{ sum }}秒后自动领取</view>
      </view>
    </view>
    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="50" color="#fff"/>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop6',
  components: {
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false,
      sum: 2,
      show: 1,
      timeout: null
    };
  },
  mounted() {
    this.isAnimation = true;
    this.countdownA();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    handleClose() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('close');
    },
    countdownA() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownA();
        } else {
          this.show = 2;
          this.countdownB();
        }
      }, 1000);
    },
    countdownB() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum = 2;
        this.show = 3;
        this.countdownC();
        this.$emit('ready');
      }, 1000);
    },
    countdownC() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownC();
        } else {
          this.$emit('submit');
        }
      }, 1000);
    },
    // 主动打开
    handleOpen() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.show = 2;
      this.countdownB();
    },
    handleSubmit() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('submit');
    }
  }
};
</script>

<style lang="scss" scoped>
.p-pop-x{
  background: #000; height: 100vh;
  .timeout{ position: absolute; left: 0; bottom: -60px; color: #BCBABC; font-size: 28px; text-align: center; width: 100%;}
  .layer-1{
    height: 100vh; display: none; align-items: center; flex-direction: column; justify-content: center; text-align: center;
    &.is-show{ display: flex;}
    .title{ width: 716px; height: 242px; background: cdn('/images/pic-003.png') no-repeat; background-size: cover;}
    .box{
      width: 444px; height: 552px; background: cdn('/images/pic-004.png') no-repeat; background-size: cover; position: relative;
      .round{ position: absolute; width: 200px; height: 200px; left: 50%; top: 250px; margin-left: -100px; background: cdn('/images/pic-005.png') no-repeat; background-size: cover;}
    }
  }

  .layer-2,
  .layer-3{
    height: 100vh; display: none; align-items: center; justify-content: center; flex-direction: column;
    &.is-show{ display: flex;}
    .box{ width: 750px; height: 900px; background: cdn('/images/pic-008.png') no-repeat; background-size: cover;}
  }
  .layer-3{
    position: relative; padding-top: 100px;
    .title{ width: 750px; height: 242px; background: cdn('/images/pic-006.png') no-repeat; background-size: cover;}
    .box{ width: 750px; height: 900px; background: cdn('/images/pic-007.png') no-repeat; background-size: cover; margin-top: -60px; position: relative;}
    .absolute{
      position: absolute; left: 169px; top: 125px; width: 418px; height: 350px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
      .dl{ line-height: 1;}
      .dt{ color: #99602C; font-size: 36px; padding-bottom: 10px;}
      .amount{
        color: $uni-color-primary; position: relative; font-size: 160px; font-weight: bold;
        .sub{ font-weight: normal; font-size: 40px; position: absolute; right: -40px; bottom: 26px;}
      }
    }
    .timeout{ bottom: 70px;}

    &.is-show{
      .title{ opacity:0; animation: fadeInRight .2s .3s ease-in forwards;}
      .box{ opacity:0; animation: zoomInBox .4s ease-in forwards;}
      .dl{ opacity:0; animation: zoomIn .3s .1s ease-in forwards;}
      .timeout{ opacity:0; animation: zoomIn .3s .7s ease-in forwards;}
    }
  }

  ._close{ position: absolute; right: 50px; top: 250px;}
  .is-hide{ display: none;}
  &.is-animation{
    .layer-1{
      .title{ opacity:0; animation: fadeInLeft .4s .1s ease-in forwards;}
      .box{ opacity:0; animation: zoomIn .5s .2s ease-in forwards;}
      .round{ animation: blink-animation 1s infinite;}
    }
  }
}

@keyframes fadeInLeft {
  0% {
    opacity:0;
    transform:translate3d(-100%, 0, 0)
  }
  to {
    opacity:1;
    transform:translateZ(0)
  }
}
@keyframes fadeInRight {
  0% {
    opacity:0;
    transform:translate3d(100%, 0, 0) scale3d(.3, .3, .3);
  }
  to {
    opacity:1;
    transform:translateZ(0)
  }
}

@keyframes zoomInBox {
  0% {
    opacity:0;
    transform:scale3d(.3, .3, .3)
  }
  80% {
    opacity:.5;
    transform:scale3d(1.2, 1.2, 1.2)
  }
  to {
    opacity:1;
  }
}

@keyframes zoomIn {
  0% {
    opacity:0;
    transform:scale3d(.3, .3, .3)
  }
  to {
    opacity:1;
  }
}

@keyframes blink-animation {
  0% {
    transform:scale3d(.9, .9, .9)
  }
  50% {
    transform:scale3d(1, 1, 1)
  }
  100% {
    transform:scale3d(.9, .9, .9)
  }
}
</style>
